<template>
	<view>
		<indexOne v-if="storeinfo.theme_id==1" :slideshowlist='slideshowlist' :storeinfo='storeinfo'
			:allgoods='allgoods' @goGoodsDetail='goGoodsDetail' @getAllGoods='getAllGoods()' :loadTitle='loadTitle'
			:isColumn='isColumn' @scrollHome='scrollHome'>
		</indexOne>
		<indexTwo v-if="storeinfo.theme_id==2" :slideshowlist='slideshowlist' :storeinfo='storeinfo'
			:allgoods='allgoods' @goGoodsDetail='goGoodsDetail' @getAllGoods='getAllGoods()' :loadTitle='loadTitle'
			:isColumn='isColumn' @scrollHome='scrollHome'>
		</indexTwo>
		<indexThree v-if="storeinfo.theme_id==3" :slideshowlist='slideshowlist' :storeinfo='storeinfo'
			:allgoods='allgoods' @goGoodsDetail='goGoodsDetail' @getAllGoods='getAllGoods()' :loadTitle='loadTitle'
			:isColumn='isColumn' @scrollHome='scrollHome'>
		</indexThree>

		<!-- 导航栏 -->
		<view class="nav">
			<view class="nav-cont" :class="{ fff: navShow }">
				<view class="item" style="padding: 0 30rpx;">
					<navigator class="navigator" :class="{ fwfw: navShow }" :url="'/pages/list/index?mer_id=' + mer_id"
						hover-class="none">
						<u-icon name="search" size="28"></u-icon>
						搜索
					</navigator>
				</view>
				<view :class="{ active: navActive === 0 ,navfff: theme_id==2}" class="item" @click="set_where(1)">
					<view class="cont">{{ i18n.Default }}</view>
				</view>
				<view :class="{ active: navActive === 1 }" class="item" @click="set_where(2)">
					<view class="cont">{{ i18n.Sales }}</view>
				</view>
				<view :class="{ active: navActive === 2 }" class="item" @click="set_where(3)">
					<view class="cont">
						{{ i18n.Price }}
						<image
							:src="sortPrice ? '../../static/images/high-price.png' : '../../static/images/low-price.png'">
						</image>
					</view>
				</view>
				<view :class="{ active: navActive === 3 }" class="item" @click="set_where(4)">
					<view class="cont">{{ i18n.New }}</view>
				</view>
				<view v-if="storeinfo.theme_id!=3" class="item" @click="
						navActive = 4;
						isColumn = !isColumn;
					">
					<view class="cont"><text
							:class="['layout-icon', 'iconfont', isColumn ? 'iconliebiao' : 'iconliebiao1']"></text>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="isopen" mode="bottom">
			<view class="content">
				<!-- #ifdef MP -->
				<button open-type="share" class="weix">
					<view class="">
						<u-icon name="weixin-circle-fill" color="#5eae72" size="80"></u-icon>
					</view>
					<text style="font-size: 28rpx;">{{ i18n.Sendittoafriend }}</text>
				</button>
				<!-- #endif -->
				<view class="haib" @click="goPoster">
					<view class="">
						<u-icon name="photo" color="#5391f1" size="80"></u-icon>
					</view>

					<text style="font-size: 28rpx;">{{ i18n.Productionposters }}</text>
				</view>
			</view>
		</u-popup>
		<view class="float" @click="isopen = true">
			<image src="@/static/images/share_icon.png" mode=""></image>
		</view>
		<!-- 海报展示 -->
		<view class="mask" v-if="posterImageStatus" @click="posterImageStatus = false"></view>
		<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
		<view class="canvasimgbox" v-if="posterImageStatus">
			<image class="canvasimg" @longtap="saveimage" :src="posterimg" mode="widthFix"></image>
			<image src="/static/images/poster-close.png" class="close" @click="posterImageClose"
				v-if="posterImageStatus"></image>
			<view class="keep" v-if="posterImageStatus">{{ i18n.Longpresstosavethepicture }}</view>
		</view>
	</view>
</template>

<script>
	import indexOne from './children/indexOne.vue';
	import indexTwo from './children/indexTwo.vue';
	import indexThree from './children/indexThree.vue';
	const globalData = getApp().globalData;
	import {
		getStoreDetail,
		getStoreGoods
	} from '@/api/store.js';
	import {
		getQRcode
	} from '@/api/api.js'
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from 'vuex';
	import {
		getappid
	} from '@/api/public.js';
	export default {
		components: {
			indexOne,
			indexTwo,
			indexThree
		},
		data() {
			return {
				slideshowlist: [ //轮播列表
					{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				where: {
					order: '',
					keyword: '',
					page: 1,
					limit: 20
				},
				mer_id: '', //店铺ID
				storeinfo: [], //店铺信息:recommend热门商品
				allgoods: [], //全部商品
				posterimg: '', //展现的海报图
				posterImageStatus: false, //海报生成完成显示
				storeImage: '/static/images/aa3b94e9cd1995b5ebe56545a815a26764f1c35677a94-Xt87l2_fw1200.jpg', //海报产品图
				posterbackgd: '/static/images/posterbackgd.png',
				canvasStatus: false, //创建海报绘图标签
				isopen: false, //是否打开分享组件
				loadTitle: '', //加载文本
				loadend: false, //是否加载
				navActive: 0,
				sortPrice: true, // 价格排序
				isColumn: true,
				navShow: false,
				select: {
					show: false,
					selected: 0,
					options: [{
							id: 0,
							name: globalData.$t('index').Default
						},
						{
							id: 1,
							name: globalData.$t('index').Score
						}
					]
				},
			}
		},
		computed: {
			i18n() {
				return globalData.$t('index');
			},
			...mapGetters(['isLogin'])
		},
		onShow() {
			
		},
		onLoad(option) {
			this.mer_id=option.id
			if(this.mer_id){
				this.getStore()
				this.getAllGoods()
			}else{
				this.getmerid()
			}
			//#ifdef H5
			toLogin();
			//#endif
			//底部tabbar
			uni.setTabBarItem({
				index: 0,
				text: this.i18n.Home
			});
			uni.setTabBarItem({
				index: 1,
				text: this.i18n.Classify
			});
			uni.setTabBarItem({
				index: 2,
				text: this.i18n.GoodsCart
			});
			uni.setTabBarItem({
				index: 3,
				text: this.i18n.My
			});
		},
		methods: {
			// 去商品详情页
			goGoodsDetail: function(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}&mer_id=${this.mer_id}`
				});
			},
			scrollHome: function(e) {
				this.navShow = e
			},
			//排序
			set_where: function(param) {
				this.loadend = false;
				this.where.page = 1;
				this.allgoods = [];
				switch (param) {
					case 1:
						this.navActive = 0;
						this.where.order = '';
						this.getAllGoods();
						break;
					case 2:
						this.navActive = 1;
						this.where.order = 'sales';
						this.getAllGoods();
						break;
					case 3:
						this.navActive = 2;
						this.sortPrice = !this.sortPrice;
						this.where.order = this.sortPrice ? 'price_asc' : 'price_desc';
						this.getAllGoods();
						break;
					case 4:
						this.navActive = 3;
						this.where.order = 'is_new';
						this.getAllGoods();
						break;
				}
			},
			getmerid: function() {
				getappid({
						appid: uni.getAccountInfoSync().miniProgram.appId
					})
					.then(res => {
						this.mer_id = res.data.mer_id;
						this.getStore()
						this.getAllGoods()
					})
					.catch(res => {});
			},
			// 获取商铺详情
			getStore: function() {
				let that = this;
				getStoreDetail(that.mer_id)
					.then(res => {
						that.storeinfo = res.data;
					})
					.catch(res => {
						return that.$util.Tips({
							title: res
						});
					});
			},
			// 获取商铺商品
			getAllGoods: function() {
				let that = this;
				if (this.loadend) return;
				this.loadTitle = '';
				getStoreGoods(that.mer_id, that.where)
					.then(res => {
						that.allgoods = that.$util.SplitArray(res.data.list, that.allgoods);
						let loadend = res.data.list.length < that.where.limit;
						that.loadend = loadend;
						that.loadTitle = loadend ? that.i18n.YiLoadMore : that.i18n.LoadMore;
						that.where.page += 1;
					})
					.catch(res => {
						that.loadTitle = that.i18n.LoadMore;
						return that.$util.Tips({
							title: res.message
						});
					});
			},
			//隐藏海报
			posterImageClose: function() {
				this.posterImageStatus = false;
			},
			//保存海报
			saveimage: function() {
				//#ifdef MP
				let that = this;
				uni.saveImageToPhotosAlbum({
					filePath: this.posterimg,
					success() {
						uni.showToast({
							title: that.i18n.Thepicturewassavedsuccessfully,
							duration: 2000
						});
					}
				});
				//#endif
			},
			Saveposters: function() {
				let that = this;
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 280,
					height: 420,
					fileType: 'png',
					quality: 1,
					canvasId: 'myCanvas',
					success: function(res) {
						that.canvasStatus = false;
						that.posterImageStatus = true;
						that.posterimg = res.tempFilePath;
					}
				});
			},
			//生产海报
			goPoster: function() {
				let that = this;
				this.canvasStatus = true;
				uni.showLoading({
					title: this.i18n.Postergenerationunderway,
					mask: true
				});
				let arr2 = [that.posterbackgd, that.storeImage];
				that.isopen = false;
				let data = {
					type: 'wechat',
					action: 2
				};
				getQRcode(globalData.mer_id, data).then(res => {
					uni.downloadFile({
						url: res.data.url, //仅为示例，并非真实的资源
						success: res => {
							arr2[2] = res.tempFilePath;
							that.$util.PosterCanvas(arr2, that.storeinfo.mer_name, '', function(
								tempFilePath) {
								that.Saveposters();
							});
						},
						fail: function(res) {
							uni.hideLoading();
							that.$util.Tips({
								title: that.i18n.PosterQRcodegenerationfailed
							});
						}
					});
				});
			},
			//分享给朋友
			goFriend: function() {
				this.isopen = false;
			},
			//是否打开分享组件
			share: function() {
				this.isopen = !this.isopen;
			},
		},
		//用户点击右上角分享
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			return {
				title: that.storeinfo.mer_name || '',
				imageUrl: that.storeinfo.image || '',
				path: '/pages/index/index?id=' + that.id
			};
		},
		//分享朋友圈
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.storeinfo.mer_name || '',
				imageUrl: that.storeinfo.image || '',
				path: '/pages/index/index?id=' + that.id
			};
		},
		// #endif
	}
</script>

<style lang="scss" scoped>
	.float {
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.fwfw {
		background: #f5f5f5 !important;
		color: #999999;
	}

	.fff {
		background-color: #ffffff !important;
		color: #000000 !important;
	}

	.content {
		display: flex;
		text-align: center;
		padding-top: 40rpx;
		padding-bottom: 40rpx;

		.weix {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
		}

		.haib {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
		}
	}

	.canvasimgbox {
		position: fixed;
		z-index: 99999;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.canvasimg {
			width: 500rpx;
		}

		.close {
			width: 46rpx;
			height: 75rpx;
			position: absolute;
			right: 0;
			top: -73rpx;
			display: block;
		}

		.keep {
			position: fixed;
			bottom: -20px;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;
			text-align: center;
			font-size: 25rpx;
			margin-top: 10rpx;
		}
	}

	// 创建海报
	.canvas {
		z-index: -999;
		width: 280px;
		height: 420px;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		top: 50%;
		margin-top: -357rpx;
		opacity: 0;
	}

	// 遮盖层
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 1);
		z-index: 11;
	}

	.nav.fixed {
		position: fixed;
		left: 0;
		width: 100%;

		.nav-cont {
			position: absolute;
			width: 100%;
		}
	}

	.nav {
		z-index: 1;
		position: fixed;
		top: 0;
		width: 100%;
		background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));

		.nav-cont {
			display: flex;
			align-items: center;
			height: 84rpx;
			color: #ffffff;

			.item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				min-width: 0;
				height: 60rpx;

				.navigator {
					width: 138rpx;
					height: 60rpx;
					border-radius: 30rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 60rpx;
					background-color: rgba(255, 255, 255, 0.3);
				}

				.cont {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					font-weight: 500;
					font-size: 24rpx;
					font-weight: bold;

					.arrow-icon {
						margin-left: 10rpx;
						font-size: 18rpx;
					}

					.layout-icon {
						font-size: 36rpx;
					}

					.icon-pailie {
						font-size: 32rpx;
					}

					image {
						width: 15rpx;
						height: 21rpx;
						margin-left: 7rpx;
					}
				}
			}

			.active {
				.cont {
					border-bottom: 7rpx solid #e93323;
				}
			}
		}

		.select {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 2;
			width: 100%;
			padding-right: 60rpx;
			padding-bottom: 28rpx;
			padding-left: 74rpx;
			border-bottom-right-radius: 24rpx;
			border-bottom-left-radius: 24rpx;
			background-color: #ffffff;

			.item {
				margin-top: 28rpx;
				font-size: 24rpx;
				color: #454545;
			}

			.active {
				background: url(@/static/images/active.png) right center/20rpx no-repeat;
				color: #e93323;
			}
		}
	}
</style>
